<template>
<div class="spike-marketing views-container">
        <!-- 表单弹窗 -->
        <el-dialog @close="saveDialogForm" :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table" width="50%" >
            <div class="wlm-form" v-if="dialogTableVisible">
                <div class="wlm-form-header wlm-dialog-fixheader">
                    <span class="wlm-dialog-inlenr">选择类型</span>
                </div>
               <div class="wlm-dialog-content flex-row flex-align-c">
                    <!-- <div v-for="(item,index) in itemList" :key="index" style="margin:10px;" @mouseenter="enters($event,index)" @mouseleave="leaver($event,index)"> -->
                    <div v-for="(item,index) in itemList" :key="index" style="margin:10px;">
                        <div class="image-title">
                          {{item.title}}
                          <div class="" style="position: relative;">
                            <img :src="`${getPath(item.img)}`" @click="imagebtn(item.type)" class="image-path" :class="{'classred':current==item.type}">
                            <div :class="{'image_btn':current==item.type}">
                              <div :class="{'icon_btn':current==item.type}">
                                <i class="el-icon-check"  style="color:white"></i>
                              </div>
                            </div>
                          </div>

                          </div>
                    </div>
                     <!-- <el-button size="small"  type="primary"  @click="$router.push({path:'/application/custormPosterformAdd', query :{ class:index}})">保存</el-button> -->
                </div>
              </div>
                <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
                <el-button size="small"  type="primary"  @click="savebtn">保存</el-button>
                </footer>
         </el-dialog>
      <div class="wlm-table">
        <div class="wlm-table-hearder-btn">
             <el-button size="small" type="primary" @click="establish">创建表单</el-button>
        </div>
         <div class="wlm-table-header">
             <el-form :model="tableFormatData.custormform.files" size="small" label-width="85px" class="retail-form" label-position="right">
                <el-form-item label="" class="filter">
                    <el-form-item label="表单名称：">
                        <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.custormform.files.form_title" placeholder="请输入活动名称" style="width:160px;"></el-input>
                    </el-form-item>
                    <el-form-item label="表单类型：">
                       <el-select placeholder="请选择" style="width:200px;" v-model="tableFormatData.custormform.files.type">
                            <!-- <el-option label="页面表单" :value="1">
                            </el-option> -->
                            <el-option label="商品表单" :value="2">
                            </el-option>
                             <el-option label="抽奖表单" :value="3">
                            </el-option>
                             <el-option label="分销商表单" :value="4">
                            </el-option>
                       </el-select>
                    </el-form-item>
                        <!-- <el-form-item label="启用情况：" >
                              <el-select placeholder="请选择" style="width:200px;" v-model="tableFormatData.custormform.files.state" >
                                <el-option label="启用" :value="1">
                                </el-option>
                                <el-option label="未启用" :value="2">
                                </el-option>
                              </el-select>
                    </el-form-item> -->
                </el-form-item>
                <el-form-item label="" class="filter-btns">
                    <el-button type="primary" @click="filesSerch">筛选</el-button>
                    <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
                </el-form-item>
            </el-form>
         </div>
          <div class="wlm-table-content">
              <!-- :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" -->
               <el-table :data="tableFormatData.custormform.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                   <el-table-column  label="表单名称" >
                        <template slot-scope="scope">
                            <p>{{scope.row.form_title}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column  label="表单类型" >
                        <template slot-scope="scope">
                          <!-- {{!!scope.row.cate?scope.row.cate.cname:''}} -->
                            <!-- <p v-if="scope.row.type==1">弹窗表单</p> -->
                            <p v-if="scope.row.type==2">商品表单</p>
                            <p v-if="scope.row.type==3">抽奖表单</p>
                            <p v-if="scope.row.type==4">分销商表单</p>
                        </template>
                    </el-table-column>
                    <el-table-column  label="使用情况" >
                        <template slot-scope="scope">
                            <!-- <p>{{scope.row.state==1?'启用':'未启用'}}</p> -->
                            <!-- {{}} -->
                           <div v-if="scope.row.type==2">
                             <div v-if="scope.row.goods"> 正在使用的商品：</div>
                            <div v-for="(item,index) in scope.row.goods" :key="index">
                                    <router-link class="wlm-text" tag="span" :to="{path:'/merchandise/merchandiseManagementAdd',query:{id:item.goods_id,buss_id:item.bus_id}}">
                                      <el-button  type="text">{{item.goods_name}}</el-button>
                                    </router-link>
                            </div>
                           </div>
                           <div v-else>
                            <el-switch :active-value="1" v-if="scope.row.type !=2" :inactive-value="2" @change="changeTablebtn(scope.row.state,scope.row.form_id)"  v-model="scope.row.state"> </el-switch>
                           </div>
                        </template>
                         <!-- <template slot-scope="scope" >
                            <el-switch :active-value="1" v-if="scope.row.type !=2" :inactive-value="2" @change="changeTablebtn(scope.row.state,scope.row.form_id)"  v-model="scope.row.state"> </el-switch>
                          </template> -->
                    </el-table-column>
                     
                    <el-table-column  label="操作" >
                        <template slot-scope="scope">
                             <div class="operation-group">
                                   <!-- <router-link class="wlm-text" tag="a" target="_blank" :to="{path:'/application/custormPosterformAdd', query:{form_id:scope.row.form_id,class:scope.row.type}}">
                                      <el-button type="text">编辑</el-button>
                                    </router-link> -->
                                    <el-button type="text" @click="textbjbtn(scope.row.form_id,scope.row.type)">编辑</el-button>
                                <div class="btn-line"></div>
                                 <router-link class="wlm-text" tag="span" :to="{path:'/application/lookcustormPosterform',query:{form_title:scope.row.form_title,type:scope.row.type,form_id:scope.row.form_id}}">
                                  <el-button size="small" type="text">查看</el-button>
                                 </router-link>
                                <div class="btn-line"></div>
                                 <el-button class="wlm-text" size="small" type="text" :data-query="JSON.stringify({form_id:scope.row.form_id})" v-exceldown="{path:'formpageUserExport&',query: {type:1}}">导出</el-button>
                                <div class="btn-line"></div>
                                <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.form_id)" >删除</el-button>
                             </div>
                        </template>
                    </el-table-column>
               </el-table>
               <div class="pagination-content flex-row flex-justify-e flex-align-c">
        <!-- <el-row class="pagination-btns">
          <el-checkbox class="check-all"  true-label="1" false-label="0" v-model="tableFormatData.Circle.files.checkall" @change="toggleSelection">全部</el-checkbox>
          <el-button class="right-8" :disabled="isGroup" size="mini" @click="delTableList">删除</el-button>
        </el-row> -->
        <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
                    :current-page.sync="tableFormatData.custormform.pagination.page"
            :page-sizes="tableFormatData.custormform.pagination.pagesizes"
                    :page-size.sync="tableFormatData.custormform.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
                    :total="hasTableData?tableFormatData.custormform.pagination.total : 0">
                </el-pagination>
            </div>
          </div>
      </div>
</div>
</template>
<script>
import {
  formpageIndex,
  formpageDelete,
  formpageState
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
import exceldown from '@/directive/exceldown'
export default {
  mixins: [mixins.getters('Table')],
  name: 'Custormform',
  computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/image/${path}`)
      }
    }
  },
  directives: {
    exceldown
  },
  data() {
    return {
      current: 0,
      isbtn: false,
      dialogTableVisible: false,
      itemList: [{
        title: '商品表单',
        img: '15.png',
        type: 2
      },
      //  {
      //   title: '抽奖表单(开发中...)',
      //   img: 'tanchuang.png',
      //   type: 1
      // }, 
      {
        title: '抽奖表单',
        img: '18.png',
        type: 3
      }, {
        title: '分销商表单',
        img: '17.png',
        type: 4
      }],
      tableFormatData: {
        current: 'custormform',
        custormform: {
          key: 'custormform',
          api: {
            getList: formpageIndex,
            delList: formpageDelete
          },
          tableData: [],
          files: {
            ids: [],
            form_title: '',
            type: '',
            state: '',
            checkall: '0',
            Recycle: 'form_id'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    // 因为 弹窗表单 统一下单 分销商资料还在开发中，不给与选择，开发完成后删除leaver,enters事件
    // enters($event, index) {
    //   if (index != 0) {
    //     $event.currentTarget.className = 'active'
    //   }
    // },
    // leaver($event, index) {
    //   if (index != 0) {
    //     $event.currentTarget.className = ''
    //   }
    // },
    imagebtn(index) {
      console.log('index+++++++++++++++', index)
      // 因为 弹窗表单 统一下单 分销商资料还在开发中，不给与选择，开发完成后注释if判断即可
      // if (index == 2) {
      //   this.current = index
      // }
      // 打开这个
      this.current = index
    },
    textbjbtn(form_id, type) {
      this.$confirm('编辑会影响之前的用户提交表单数据的完整性，强烈建议先导出之前的数据进行自行保存，是否继续编辑？', '提示', {
        confirmButtonText: '前往编辑',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(action => {
        if (action === 'confirm') {
          this.$router.push({ path: '/application/custormPosterformAdd', query: { form_id: form_id, class: type } })
        }
      }).catch(() => {

      })
      // this.$router.push({path:'/application/custormPosterformAdd',query:{form_id:form_id,class:type}})
    },
    savebtn() {
      if (this.current != 0) {
        console.log('9999999999999999999', this.current)
        this.$router.push({ path: '/application/custormPosterformAdd', query: { class: this.current } })
      } else {
        this.$message.error('请选择类型！')
      }
    },
    changeTablebtn(state, form_id) {
      formpageState({ state: state, ids: [form_id] }).then(res => {
        const { data: { msg, code } } = res
        if (code === 1) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    establish() {
      this.dialogTableVisible = true
    },
    saveDialogForm() {

    },

    saveform() {
      this.dialogTableVisible = false
    },
    dddbtn(index) {
      console.log('++++++ddddddddddddd', index)
    }
  }
}
</script>
<style lang="scss" scoped>
.image-title{
  text-align: center;
  padding:5px;
  height: 426px;
}
.image-path{
  border: 1px solid #ccc;
   border-radius: 4px;
}
  .classred{
    // border: 1px solid #fb6638;;
    // border-radius: 4px;
    border-color: #fb6638;
    border-radius: 4px;

  }
  .active{
    // background: red;
    cursor:not-allowed !important;
    // pointer-events:none;
  }
  .image_btn{
    position: absolute;
    top:1px;
    left:1px;
    width: 206px;
    height: 366px;
    background: rgba(0,0,0,.5);
  }
  .icon_btn{
    background: #fb6638;;
    height: 30px;
    width: 30px;
    display: block;
    line-height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 45%;
  }

</style>
